<template>
  <div class="out">
        <div class="inner" style="width: 0px;" :style="{backgroundColor:bgColor,width:progress}">
        <div class="light"></div>

        </div>
    </div>
</template>

<script setup lang="ts">
import {defineProps} from "vue"
    const props = defineProps({
        bgColor:{
            type:String,
            default:'rgba(6, 6, 6, 0.2)'
        },
        progress:{
            type:String,
            default:'0%'
        }
    })
</script>

<style scoped lang="scss">
.out{
        width: 160px;
        height: 8px;
        border-radius: 8px;
        box-shadow: 0 0 3px 0 rgba(6, 6, 6, 0.4) inset;
        position: relative;
    }
    .inner{
        width: 80px;
        height: 8px;
        border-radius: 8px;
        position: absolute;
        left: 0px;
        transition: all 0.2s;
        overflow: hidden;
    }
    .light{
        box-shadow: 0 0 13px 8px rgba(255, 255, 255, 0.5);
        height: 8px;
        background-color: rgba(255, 255, 255, 0.5);
        position: absolute;
        left: 0;
        animation: move 2s ease-in infinite;
    }
    @keyframes move {
        0%{
            left: -10px;
        }
        100%{
            left: 120px;
        }
    }
</style>